<template>
    <div class="root">
        <swiper class="s-i" loop auto dots-position='center'>
            <swiper-item class="sw-i" v-for="n in lunbotu">
                <img :src='n.image'>
                <p class="p1">{{n.timestamp | riqi}}</p>
                <p class="p2">{{n.title}}</p>
            </swiper-item>
        </swiper>
    </div>
</template>
<script>
import { Swiper, SwiperItem } from 'vux'

export default {
    props: ["lunbotu"],
    components: {
        Swiper,
        SwiperItem,
    },
}
</script>
<style>
img {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.s-i{
    width: 100%;
    height: 225px;
}
.sw-i{
    position: relative;
}
.p1 {
    position: absolute;
    left: 15px;
    bottom:88px;
    color: white;
    margin: 0px; 
    font-size: 13px;       
}

.p2{
    position: absolute;
    left: 14px;
    bottom:65px;
    color: white;
    font-size: 20px;
    margin: 0px;
}

</style>